<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="./yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="./yl/prop-types.js"></script>

</head>
<body>

<!--
props 接收的参数是只读的
-->
<div id="app"></div>
<div id="app2"></div>
<div id="app3"></div>
<script type="text/babel">

    class Person extends React.Component {
        /**
         * 增加限定
         * .string 限定类型
         * .isRequired 限定不能为空
         */
        static propTypes = {
            //只能是string 不能为空
            name: PropTypes.string.isRequired
        }
        //定义默认值
        static defaultProps = {
            like: '足球'
        }
        render() {
            const {name,like}=this.props
            return <div>
                <h1>{name}</h1>
                <h1>{like}</h1>
            </div>;
        }
    }
    ReactDOM.render(<Person age="16" name="123"/>, document.getElementById('app'))
    ReactDOM.render(<Person age="16" name="少林金刚退"/>, document.getElementById('app2'))
    ReactDOM.render(<Person age="16" name="周星驰"/>, document.getElementById('app3'))
</script>
</body>
</html>
